<template>
	<!-- 搜索框 -->
	 <view class="search-bar">
		 <view class="search-bar-box">
		 <image class="search-span" src="/static/tabs/search.png"/>
		 <input type="text" value=""  placeholder="请输入搜索内容" class="search-text" maxlength="10" focus/>
		 <button class="search-btn">搜索</button>
		 </view>
	 </view>
</template>
 
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>
<style>
	.search-bar{
		width: 100%;
		height: 90rpx;
		margin-top: 2%;
	}
	.search-bar-box{
		display: flex;
		margin: 0 auto;
		/* width: 620rpx; */
		height: 70rpx;
		border:1rpx solid #00a8cc;
		border-radius: 50rpx;
	}
	.search-span{
		width: 100rpx;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}
	.search-text{
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}
	.search-btn{
		background-color: #00a8cc;
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}
</style>